<template>
    <el-tabs ref="tabs" v-model="activeName" class="app-tab">
        <el-tab-pane label="连接管理" name="first" :lazy="true">
            <ConnectionList></ConnectionList>
        </el-tab-pane>
        <el-tab-pane label="基本功能" name="second" :lazy="true">
            <FeatureVue></FeatureVue>
        </el-tab-pane>
        <el-tab-pane label="数据库结构" name="third" :lazy="true">
            <Compare></Compare>
        </el-tab-pane>
    </el-tabs>
</template>
<script lang="ts" setup>
import { ref, onMounted, nextTick } from 'vue'
import type { ElTabs } from 'element-plus'
import ConnectionList from "./views/ConnectionList.vue";
import FeatureVue from "./views/Feature.vue";
import Compare from "./views/Compare.vue"
import { invoke } from '@tauri-apps/api/tauri'

const activeName = ref('first');
const tabs = ref<InstanceType<typeof ElTabs>>()

// const handleClick = (tab: TabsPaneContext, event: Event) => {
//     // console.log(tab.index);
//     let index = parseInt(tab.index || "0") + 1;
//     let el = tabs.value?.$el.childNodes[1].childNodes[index];
//     if (el && el.tagName && el.getAttribute("w")) {
//         return;
//     }
//     setTimeout(() => {
//         let el = tabs.value?.$el.childNodes[1].childNodes[index];
//         if (el.tagName) {
//             if (el.getAttribute("w")) {
//                 return;
//             }
//             el.setAttribute("w", "1");
//             el.style.height = "100%";
//             el.style.width = "100%";
//         }
//     }, 150);
// }

const resize = () => {
    let el_tabs = tabs.value?.$el;
    let el_root = el_tabs.parentNode;
    el_root.style.height = "100%";
    el_root.style.width = "100%";
    el_tabs.children[1].style.height = (el_root.clientHeight - el_tabs.children[0].offsetHeight) + "px";
    el_tabs.children[0].children[0].children[0].children[0].style.marginLeft = "2px";
}

onMounted(() => {
    invoke("init");
    nextTick(() => {
        resize();
    });
    // console.log(tabs.value);
});

window.onresize = function () {
    nextTick(resize);
}

// onMounted(() => {

// console.log(this.$refs.tabs);
// });

</script>